<template>
	<view class="container">
		<view class="tabs">
			<view v-for="(item,index) in tabs" :key="index" :class="index == tabIndex ? 'active' : 'tab'" :data-current="index"
			 @tap="tapTab(index)">
				{{item.tab}}
			</view>
		</view>
		<view class="pictures">
			<swiper :current="tabIndex" class="swiper" :duration="200" @change="change">
				<swiper-item v-for="(item,index) in tabs" :key="index">
					<view class="swiper-item">
						<image :src="item.img" mode=""></image>
					</view>
					<text class="font30 m_t20">{{tabIndex + 1}}/{{tabs.length}}</text>
					<view class="explain m_t30">
						<text class="font36 bold">奖项说明</text>
						<view class="explain_words font30 m_t14">
							奖项说明。这是什么杯什么届获得的什么奖。
							这是什么杯什么届获得的什么奖。
							这是什么杯什么届获得的什么奖。
							这是什么杯什么届获得的什么奖。
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabs: [{
					"tab": "奖项1",
					"img": "/static/index_img/1.png"
				}, {
					"tab": "奖项2",
					"img": "/static/index_img/1.png"
				}, {
					"tab": "奖项3",
					"img": "/static/index_img/1.png"
				}, {
					"tab": "奖项4",
					"img": "/static/index_img/1.png"
				}, {
					"tab": "奖项5",
					"img": "/static/index_img/1.png"
				}, ]
			}
		},
		methods: {
			change(e) {
				this.tabIndex = e.detail.current
			},
			// 点击tab切换
			tapTab(index) {
				if (this.tabIndex === index) {
					return false;
				} else {
					this.tabIndex = index;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
		background: #ffe294;
	}

	.container {
		display: flex;
		flex-direction: column;

		.tabs {
			width: 100%;
			padding: 50upx 24upx;
			display: flex;
			justify-content: space-between;

			.tab {
				color: #afa089;
				font-size: 32upx;
			}

			.active {
				color: #3f2a0d;
				font-size: 34upx;
			}
		}

		.pictures {
			min-height: 80vh;

			uni-swiper {
				width: 100%;
				min-height: 80vh !important;
				display: flex;
				justify-content: center;

				swiper-item {
					width: 80vw !important;
					display: flex;
					align-items: center;
					flex-direction: column;
					margin: 0 10vw;

					.swiper-item {
						width: 72vw;
						padding: 20upx 0;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #fff;
						border-radius: 20upx;

						image {
							width: 480upx;
							height: 600upx;
						}
					}

					.explain {
						padding: 0 32upx;
						display: flex;
						flex-direction: column;
						color: #3f2a0d;
					}
				}
			}
		}
	}
</style>
